<template>
  <div class="add">
    <div class="demand-name">
      <span>需求名称</span
      ><el-input
        class="name-input"
        v-model="demandForm.demandName"
        placeholder="需求名称"
      ></el-input>
    </div>
    <div class="demand-name">
      <span>需求描述</span
      ><el-input
        class="name-input"
        v-model="demandForm.demandDescribe"
        placeholder="请输入需求描述"
      ></el-input>
    </div>
    <div class="demand-class">
      <span>需求分类</span>
      <el-select class="class-input" v-model="demandForm.categoryId" placeholder="请选择">
        <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
        </el-option>
      </el-select>
    </div>
     <div class="demand-download">
      <el-upload
        class="upload-demo"
        action="http://112.124.67.43:8088/iot/demand/fileUpload"
        :on-change="handleChange"
        :on-success="successEvent"
        :file-list="fileList"
        :limit="1"
      >
        <el-button size="small" type="primary">添加附件</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传一个文件,如果需要上传多个文件,请上传压缩文件
        </div>
      </el-upload>
    </div>
    <div class="demand-dsc">
      <span>备注</span>
      <el-input
            v-model="demandForm.remarks"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入内容"
      >
      </el-input>
    </div>
    <p><el-button type="primary" @click="getPostDemand">发布需求</el-button></p>
  </div>
</template>
<script>
import {ReqCommentClass,ReqPostDemand} from '../../../request/index'
export default {
  data() {
    return {
      options: [],
      fileList: [],
      demandForm: {
        demandName: "",
        demandDescribe: "",
        categoryId:"",
        docFilesUrl: "",
        enterpriseId: "",
        remarks: "",
      },
    };
  },
  methods: {
    // 对文件列表操作
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    // 文件上传成功时
    successEvent(response, file, fileList) {
      this.demandForm.docFilesUrl = response.msg;
      if(response.code==0){
        this.$message({
          type:'success',
          message:'文件上传成功'
        })
      }
    },
     // 获取需求分类
    async ResCommentClass() {
      let res = await ReqCommentClass();
      this.options = res.category;
    },
    // 发布需求
    async getPostDemand() {
      this.demandForm.enterpriseId=sessionStorage.getItem('id');
      let resDemand = await ReqPostDemand(this.demandForm);
      if(resDemand.msg=="success"){
         this.$message({
          message: "发布成功",
          type: "success"
        });
      }
    },
  },
  created(){
    this.ResCommentClass()
  }
};
</script>
<style scoped>
.el-button{
  background-color: rgb(27,147,196);
}
.add {
  width: 90%;
  margin: 0 auto;
  height: 100%;
}
.demand-name,
.demand-class {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #eee;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}
.demand-name > span,
.demand-class > span {
  margin-right: 20px;
  flex: 1;
  font-size: 14px;
}
.name-input,
.class-input {
  flex: 3;
}
.el-input__inner {
  border: none !important;
}
.demand-dsc {
  margin-top: 20px;
}
.demand-dsc :nth-child(1) {
  font-size: 14px;
}
.demand-dsc :nth-child(2) {
  display: block;
  width: 100%;
}
.demand-dsc :nth-child(1):focus {
  outline: none;
}
.demand-download :nth-child(1) {
  font-size: 14px;
  margin-top: 5px;
}
p{
  margin-top: 10px;
}
</style>